<template>
	<div class="about">
		<div class="about-top">
			<p>关于</p>
		</div>
		<div class="backgrou">
			<img src="../../public/img/icons/QQ20.jpg" alt="">
		</div>
		<ul class="ul">
			<li @click="business">
				<p>商务合作</p>
				<p>></p>
			</li>
			<li @click="proposer">
				<p>申请开店</p>
				<p>></p>
			</li>
			<li @click="opinion">
				<p>意见反馈</p>
				<p>></p>
			</li>
			<li @click="online">
				<p>在线客服</p>
				<p>></p>
			</li>
			<li>
				<p>联系电话</p>
				<p>></p>
			</li>
		</ul>
	</div>
</template>
<script>
	export default {
		methods: {
			// 商务
			business() {
				console.log(1)
				this.$router.push('/business')
			},
			// 申请
			proposer(){
				this.$router.push('/proposer')
			},
			// 意见
			opinion(){
				this.$router.push('/opinion')
			},
			// 在线
			online(){
				this.$router.push('/online')
			}

		}
	}
</script>
<style scoped>
	.about {
		background: #ccc;
	}

	.about-top {
		width: 100vw;
		height: 30px;
		background: deepskyblue;
	}

	.about-top p {
		width: 100px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #fff;
		font-size: 16px;
		margin: 0 auto;
	}

	.backgrou {
		height: 260px;
	}

	.backgrou img {
		width: 100%;
		height: 100%;
	}

	.ul li {
		width: 100vw;
		height: 40px;
		background: #fff;
		border-bottom: 1px solid #ccc;
	}

	.ul li p:nth-child(1) {
		float: left;
		font-size: 20px;
		margin: 10px 20px;
	}

	.ul li p:nth-child(2) {
		float: right;
		color: #ccc;
		font-size: 30px;
		margin: 5px 10px;
	}
</style>
